<template>
  <el-drawer size="700px" :append-to-body="true" :visible.sync="taskDetailVisible" direction="rtl" :before-close="handleClose">
    <slot name="title"></slot>
    <div @click="replyRow = 1;" class="task-info-module" v-infinite-scroll="loadTrends" infinite-scroll-disabled="disabled" infinite-scroll-immediate="false" infinite-scroll-distance="300">
      <div class="task-info-tool-bar">
        <div class="tool-bar-content">
          <h1><span style="color: #409EFF;cursor: pointer;" @click="clickBelong">{{taskInfo.taskBelongName}}</span></h1>
          <div class="nav" v-if="canEditTask && !showUpdateBtn && taskInfo.taskDatatype !== '1'">
            <div class="nav-items" v-if="cantSetMilestone">
              <i class="el-icon-s-flag active" @click="setMilestone(0)" v-if="taskInfo.taskIsMilestone === '1'"></i>
              <i class="el-icon-s-flag" style="color: #909399;" @click="setMilestone(1)" v-else></i>
            </div>
            <el-dropdown>
              <div class="nav-items">
                <i class="el-icon-menu el-dropdown" style="color: #909399;"></i>
              </div>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item v-if="canEditTask" @click.native="openMoveDialog">移动任务</el-dropdown-item>
                <el-dropdown-item v-if="canDelTask" @click.native="projectOrTaskDelete(taskInfo.id)">删除任务</el-dropdown-item>
                <el-dropdown-item v-if="canCopyThisTask" @click.native="openCopyDialog">复制任务</el-dropdown-item>
                <el-dropdown-item v-if="canDelTask" @click.native="openStopDialog()">终止任务</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
            <el-dialog title="移动任务" :visible.sync="moveDialogVisible" :append-to-body="true" width="500px">
              <el-row :gutter="20">
                <el-col :span="6" style="padding-top: 10px;text-align:right;">
                  <div class="grid-content bg-purple">
                    <i class="el-icon-connection"></i>
                    移动到
                  </div>
                </el-col>
                <el-col :span="16">
                  <el-select ref="labelSelected" v-model="moveTo.id" placeholder="点击选择" style="width:300px">
                    <el-option v-for="value in moveToList" :key="value.id" :label="value.taskName" :value="value.id" :disabled="value.taskStatus !== '1'" style="width:300px"></el-option>
                  </el-select>
                </el-col>
              </el-row>
              <div slot="footer" class="dialog-footer">
                <el-button @click="moveDialogVisible = false">取消</el-button>
                <el-button type="primary" @click="moveProjectOrTask">移动</el-button>
              </div>
            </el-dialog>
          </div>
          <div v-if="!showUpdateBtn && taskInfo.taskDatatype === '1'"><el-button type="text" @click="openProjectDetail">项目详情</el-button></div>
          <div style="position: absolute;right: 20px;top: 10px;" v-if="showUpdateBtn && canEditTask">
            <el-button size="small" @click="getTaskInfo(taskInfo.id)">取消</el-button>
            <el-button size="small" type="primary" @click="projectOrTaskUpdate">保存</el-button>
          </div>
        </div>
      </div>
      <ProjectDetail ref="ProjectDetail" @refresh="refreshTaskDetail"></ProjectDetail>
      <form>
        <div class="task-info-top">
          <el-row :gutter="20">
            <el-col :span="24" style="position:relative; display: flex;">
              <span class="arrow-status" :class="getArrowType(taskInfo)"></span>
              <span class="arrow-status-white"></span>
              <span class="task-status">{{getWord(taskInfo)}}</span>
              <div v-if="!ifChangeTaskName" class="grid-content bg-purple title" style="cursor:pointer;" @click="editTaskName" >{{taskInfo.taskName}}</div>
              <div v-else class="grid-content bg-purple title"><el-input @blur="ifChangeTaskName = false;" :disabled="taskInfo.taskStatus === '3' && taskInfo.taskStatus === '9'" v-model="taskInfo.taskName"></el-input></div>
              <div class="update-status-btn">
                <el-button v-if="taskInfo.taskStatus === '2' && taskInfo.taskDatatype !== '1' && taskInfo.taskPrincipalId === userInfo.dingId && taskInfo.taskDeleteStatus ==='0'" @click="backStatus(1)">取消标记</el-button>
                <el-button v-if="taskInfo.taskStatus === '2' && taskInfo.taskDatatype !== '1' && taskInfo.taskConfirmId === userInfo.dingId && taskInfo.taskDeleteStatus ==='0'" @click="backStatus(2)">驳回</el-button>
                <el-button type="primary" v-if="taskInfo.taskStatus === '1' && taskInfo.taskPrincipalId === userInfo.dingId && taskInfo.taskDeleteStatus ==='0'" @click="openUpdateTaskStatusDialog(2)">标记完成</el-button>
                <el-button type="primary" v-if="taskInfo.taskStatus === '2' && taskInfo.taskConfirmId === userInfo.dingId && taskInfo.taskDeleteStatus ==='0'" @click="openUpdateTaskStatusDialog(3)">确认完成</el-button>
                <el-button type="primary" v-if="taskInfo.taskStatus === '1' && taskInfo.taskDatatype !== '1' && taskInfo.taskConfirmId === userInfo.dingId && taskInfo.taskDeleteStatus ==='0'" @click="noticeTask()">催办</el-button>
                <el-button type="primary" v-if="taskInfo.taskStatus === '2' && taskInfo.taskDatatype !== '1' && taskInfo.taskPrincipalId === userInfo.dingId && taskInfo.taskDeleteStatus ==='0'" @click="noticeTask()">催办</el-button>
                <el-button type="primary" v-if="canRebootTask" @click="rebootTask()">重启{{taskInfo.taskDatatype === '1' ? '项目' : '任务'}}</el-button>
              </div>
            </el-col>
          </el-row>
          <el-dialog :title="taskInfo.taskStatus==='1' ? '标记完成' : '确认完成'" :visible.sync="updateStatusDialog" :append-to-body="true" width="500px">
            <el-input type="textarea" :rows="4" placeholder="请输入内容" v-model="taskExplanation"></el-input>
            <div slot="footer" class="dialog-footer">
              <el-button type="primary" @click="updateTaskStatus" size="small">确定</el-button>
              <el-button @click="updateStatusDialog = false" size="small">关闭</el-button>
            </div>
          </el-dialog>
          <el-dialog :title="taskInfo.taskDatatype==='1' ? '有未完成的任务' : '有未完成的子任务'" :visible.sync="hasUnCompleteTask" :append-to-body="true" width="500px">
            <div style="font-size: 16px; font-weight: bold;">以下{{unCompleteTaskList.length}}项{{taskInfo.taskDatatype === '1'? '任务' : '子任务'}}未完成</div>
            <div style="background-color: #F1F1F1; margin-top: 20px;padding: 10px 20px; line-height: 24px;">
              <div v-for="(item, index) in unCompleteTaskList" :key="index">{{index + 1}}、 {{item.taskName}}</div>
            </div>
            <div slot="footer" class="dialog-footer">
              <el-button type="primary" @click="submitCompleteSubTask">全部完成</el-button>
              <el-button @click="hasUnCompleteTask = false">关闭</el-button>
            </div>
          </el-dialog>
          
          <el-row :gutter="20">
            <el-col :span="4">
              <div class="grid-content bg-purple">
                <i class="el-icon-user"></i>
                负责人
              </div>
            </el-col>
            <el-col :span="6" style="padding-top: 4px;">
              <div v-if="dingUserList.principal.id.length === 0" @click="selectDingUsers('principal')" class="select-btn"><span><i class="el-icon-plus"></i></span>请选择</div>
              <div v-else class="select-btn" v-for="(item, index) in dingUserList.principal.id" :key="item.index">
                <span @click="selectDingUsers('principal')"><img :src="dingUserList.principal.img[index]" /></span>{{dingUserList.principal.name[index]}}
                <div v-if="canEditTask" class="del" @click="delMember('principal', index)">移除</div>
              </div>
            </el-col>
            <el-col :span="4">
              <div class="grid-content bg-purple">
                <i class="el-icon-user"></i>
                确认人
              </div>
            </el-col>
            <el-col :span="6" style="padding-top: 4px;">
              <div v-if="dingUserList.confirm.id.length === 0" @click="selectDingUsers('confirm')" class="select-btn"><span><i class="el-icon-plus"></i></span>请选择</div>
              <div class="select-btn" v-for="(item, index) in dingUserList.confirm.id" :key="item.index">
                <span @click="selectDingUsers('confirm')"><img :src="dingUserList.confirm.img[index]" /></span>{{dingUserList.confirm.name[index]}}
                <div v-if="canEditTask" class="del" @click="delMember('confirm', index)">移除</div>
              </div>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="4">
              <div class="grid-content bg-purple">
                <i class="el-icon-date"></i>
                起止时间
              </div>
            </el-col>
            <el-date-picker
              v-model="taskTime"
              :disabled="!canEditTask"
              type="daterange"
              range-separator="-"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              @change="changePlanTime"
              style="margin-left: 10px;"
            ></el-date-picker>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="4">
              <div class="grid-content bg-purple">
                <i class="el-icon-time"></i>
                计划工期
              </div>
            </el-col>
            <el-col :span="6">
              <div class="grid-content bg-purple">{{planTime}}天</div>
            </el-col>
            <el-col :span="4" v-if="taskInfo.taskDatatype !== '1'">
              <div class="grid-content bg-purple">
                <i class="el-icon-data-line"></i>
                任务绩效
              </div>
            </el-col>
            <el-col :span="6" v-if="taskInfo.taskDatatype !== '1'">
              <div class="grid-content bg-purple">
                <el-input v-model="taskInfo.taskPerformanceAppraisal" :disabled="!canEditTask" style="width : 80px"></el-input>
                分
              </div>
            </el-col>
          </el-row>
          <el-row :gutter="20" style="margin-bottom: 5px;">
            <el-col :span="4">
              <div class="grid-content bg-purple">
                <i class="el-icon-edit-outline"></i>
                {{taskInfo.taskDatatype === '1'? '项目描述' : '任务描述'}}
              </div>
            </el-col>
            <el-col :span="20" style="padding-top: 10px">
              <div class="grid-content bg-purple" style="position:relative;">
                <el-input resize="none" style="margin-bottom: 5px;width: 474px;" :disabled="!canEditTask" type="textarea" :rows="4" v-model="taskInfo.taskInfo"></el-input>
                <input ref="uploadInput2" style="display:none;" type="file" @change="uploadFile($event, taskInfo.taskAttachment)" multiple="multiple">
                <span v-if="canEditTask" class="addfilebtn" @click="$refs.uploadInput2.click()"><i class="el-icon-paperclip"></i>添加附件</span>
                <div class="fileitem" v-for="(file, idx) in taskInfo.taskAttachment" :key="idx">
                  <span style="cursor: pointer;" @click="downloadFile(file.url, file.name)">
                    <img style="width:16px;height:16px;position:relative;top:-2px;margin-right:2px;" :src="getPic(file.name)" alt="">{{file.name}}
                  </span>
                  <span class="uploadtip" v-if="file.url && canEditTask" @click="delFile(idx, taskInfo.taskAttachment)"><i class="el-icon-delete"></i></span>
                  <span class="uploadtip" style="color: red;cursor:none;" v-if="!file.url">上传中<i class="el-icon-loading"></i></span>
                </div>
              </div>
            </el-col>
          </el-row>
        </div>
        <div class="box-card">
          <div class="clearfix row-1" v-if="taskInfo.taskDatatype === '2'">
            <span v-if="!ifOPenSubTask" @click="openSubTask" class="task-info-sub-title"><i class="el-icon-d-arrow-right" style="margin-right: 5px; font-weight: bold;transform: rotate(90deg);"></i>子任务（{{completeTask}}/{{subTaskList.length}}）</span>
            <span v-else @click="openSubTask" class="task-info-sub-title"><i class="el-icon-d-arrow-right" style="margin-right: 5px; font-weight: bold;transform: rotate(-90deg);"></i>子任务（{{completeTask}}/{{subTaskList.length}}）</span>
            <el-button v-if="canAddTask" style="float: right; padding: 3px 0;margin-top:14px;margin-right: 50px;font-weight: bold;" type="text" @click="addSubTaskHandle"><i class="el-icon-plus" style="font-weight: bold;margin-right:5px;"></i>创建子任务</el-button>
          </div>
          <div v-if="ifOPenSubTask" class="row-2">
            <div class="child-wrapper">
              <p>子任务</p>
              <div class="child-task" @click="init(child.id)" v-for="child in subTaskList" :key="child.id">
                <div>{{child.taskName}}</div>
                <div>{{child.taskPrincipalName}}</div>
                <div>{{child.taskStatus === '3' ? child.taskEndTime: ''}}</div>
              </div>
            </div>
          </div>
        </div>
        <AddOrUpdateTask ref="AddOrUpdateTask" @refresh="refreshTaskDetail"></AddOrUpdateTask>
        <div class="task-content">
          <div class="ccAvatar">
            <!-- <img v-for="(avatar, index) in dingUserList.cc.img" :key="index" :src="avatar" alt=""> -->
            <el-avatar v-for="(avatar, index) in dingUserList.cc.img" :key="index" :src="avatar" :size="30" :alt="name" style="margin-bottom: 5px;"></el-avatar>
            <el-tooltip class="item" effect="dark" content="修改关注人" placement="top">
              <span @click="attentionTask" v-if="canEditTask"><i class="el-icon-plus"></i></span>
            </el-tooltip>
          </div>
          <div class="date-wrapper" v-for="dateSection in dateCollect" :key="dateSection">
            <div class="project-wrapper">
              <div class="project">
                <div class="project-header">{{dateSection}}</div>
                <div class="project-trend-wrapper">
                  <div class="project-trend" v-for="value in trendDataCollect[dateSection]" :key="value.id">
                    <div class="time">{{value.dynamicCreateTime.substr(11, 5)}}</div>
                    <div class="avatar"><img :src="value.executorAvatar" alt=""></div>
                    <div class="trend-detail">
                      <p class="row-1">{{value.dynamicExecutiveName}} <span>{{value.dynamicPerformOperation}}</span></p>
                      <span class="row-2">{{value.dynamicContent}}</span>
                      <div class="fileitem" style="width: 470px;" v-for="(file,index) in value.dynamicAttachment" :key="index">
                        <span style="cursor: pointer;" @click="downloadFile(file.url, file.name)">
                          <img style="width:16px;height:16px;position:relative;top:-2px;margin-right:2px;" :src="getPic(file.name)" alt="">{{file.name}}
                        </span>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </form>
    </div>
    <div class="dynamic-bottom clearfix">
      <at-ta style="width: 100%;" :members="members" name-key="name">
        <el-input
        type="textarea"
        :rows="replyRow"
        resize="none"
        @focus="replyRow = 4;"
        placeholder="请输入讨论内容"
        style="margin-bottom:5px;"
        v-model="dynamic.dynamicContent">
      </el-input>
      </at-ta>
      <input ref="uploadInput3" style="display:none;" type="file" @change="uploadFile($event, dynamic.dynamicAttachment)" multiple="multiple">
      <span v-if="replyRow === 4" style="display: inline-block;" class="addfilebtn" @click="$refs.uploadInput3.click()"><i class="el-icon-paperclip"></i>添加附件</span>
      <span v-if="replyRow === 4" style="display: inline-block;margin-right: 10px; float:right; color: #409EFF;" @click="submitDynamic" class="addfilebtn">发送</span>
      <div class="fileitem" style="width: 100%;" v-for="(file, idx) in dynamic.dynamicAttachment" :key="idx">
        <span style="cursor: pointer;">{{file.name}}</span>
        <span class="uploadtip" v-if="file.url" @click="delFile(idx, dynamic.dynamicAttachment)"><i class="el-icon-delete"></i></span>
        <span class="uploadtip" style="color: red;cursor:none;" v-if="!file.url">上传中<i class="el-icon-loading"></i></span>
      </div>
    </div>
  </el-drawer>
</template>

<script>
import dingMixin from "@/mixins/ding";
import formUtil from "@/utils/formUtil";
import AddOrUpdateTask from './add-or-update-task'
import * as dd from 'dingtalk-jsapi'
import {dateUtil} from '@/utils/dateUtil'
import AtTa from 'vue-at/dist/vue-at-textarea'
import ProjectDetail from './project-detail'

export default {
  name: 'TaskDetail',
  data() {
    return {
      headers: {
        token: this.$cookie.get("token")
      },
      moveDialogVisible: false,
      hasUnCompleteTask: false,
      ifUpdateTask: false,
      ifChangeTaskName: false,
      ifOPenSubTask: false,
      taskTime: [],
      planTime: 0,
      subTaskList: [],
      taskDatatype: '任务',
      dingUserList: {
        principal: { id: [], img: [], name: [] },
        confirm: { id: [], img: [], name: [] },
        cc: { id: [], img: [], name: [] }
      },
      replyRow: 1,
      taskInfoInit: {},
      unCompleteTaskList: [],
      taskInfo: {
        id: 0,
        taskBelongName: "",
        taskName: "",
        taskPrincipalId: "",
        principalAvatar: "",
        taskPrincipalName: "",
        taskConfirmId: "",
        confirmAvatar: "",
        taskConfirmName: "",
        taskCcId: "",
        ccAvatar: "",
        taskCcName: "",
        taskRange: 0,
        taskPerformanceAppraisal: 0,
        taskInfo: "",
        taskStartTime: "",
        taskEndTime: "",
        taskDatatype: 0,
        taskIsMilestone: 0,
        taskAttachment: [],
      },
      moveTo: {
        id: '',
        taskName: '',
      },
      moveToList: [],
      dateCollect: [],
      trendDataCollect: {},
      dynamic: {
        dynamicTaskId: 0,
        dynamicTaskName: '',
        dynamicExecutiveId: '',
        dynamicExecutiveName: '',
        dynamicContent: '',
        dynamicAscription: 0,
        dynamicAttachment: [],
      },
      taskFileList: [],
      dynamicFileList: [],
      isFirstLoading: true,
      loading: false,
      totalPage: 1,
      page: 0,
      completeTask: 0,
      isLoadingData: true,
      members: [],
      taskExplanation: '',
      canRebootThisTask: true,
      canCopyThisTask: false,
      updateStatusDialog: false,
    };
  },
  props: ['taskDetailVisible'],
  components:{
    AddOrUpdateTask, AtTa, ProjectDetail
  },
  mixins: [dingMixin],
  mounted() {
    this.loadMembers().then(data=>this.members = data);
  },
  methods: {
    async openCopyDialog() {
      let newTask = formUtil.deepCopy(this.taskInfo);
      newTask.id = '';
      newTask.taskManageId = this.userInfo.dingId;
      newTask.taskManageName = this.userInfo.realName;
      newTask.taskStatus = 1;
      let data = {copyTask: true, data: newTask};
      this.$nextTick(() => {
        this.$refs.AddOrUpdateTask.init(data);
      })
    },
    async noticeTask() {
      if (!await this.$httpN.postB("division/task/urge", { id: this.taskInfo.id}) ) return;
      formUtil.submitSuccess('催办成功');
    },
    async backStatus(rejectType) {
      if (!await this.$httpN.postB("division/task/withdrawTask", { id: this.taskInfo.id, rejectType}) ) return;
      formUtil.submitSuccess(rejectType === 1 ? '撤回标记成功': '驳回成功');
      this.$emit("refresh");
      this.$emit("closeSelf");
    },
    getWord(item) {
      if(item.taskStatus === '1') {
        return new Date(dateUtil.thisDay()) >= new Date(item.taskStartTime).getTime()? '进行中': '未开始'
      }else if(item.taskStatus === '9') {
        return '已终止'
      }else if(item.taskStatus === '2') {
        return '待确认'
      }else if(item.taskStatus === '3') {
        if(new Date(item.taskRealEndtime).getTime() > new Date(item.taskEndTime).getTime()) {
          return '逾期完成'
        }else if(new Date(item.taskRealEndtime).getTime() === new Date(item.taskEndTime).getTime()){
          return '按时完成'
        }else{
          return '提前完成'
        }
      }
    },
    getArrowType(item) {
      if(item.taskStatus === '1') {
        return new Date(dateUtil.thisDay()) >= new Date(item.taskStartTime).getTime()? 'arrow-4': 'arrow-2'
      }else if(item.taskStatus === '9') {
        return 'arrow-3'
      }else if(item.taskStatus === '2') {
        return 'arrow-6'
      }else if(item.taskStatus === '3') {
        if(new Date(item.taskRealEndtime).getTime() > new Date(item.taskEndTime).getTime()) {
          return 'arrow-5'
        } else{
          return 'arrow-1'
        }
      }
    },
    clickBelong() {
      if(this.taskInfo.taskDatatype === '3') {
        this.init(this.taskInfo.taskBelongId);
      }else if(this.taskInfo.taskDatatype === '2') {
        this.$router.push({ name: 'livolobim-project', params: {projectId: this.taskInfo.taskBelongId}})
      }
    },
    handleClose() {
      this.$emit("closeSelf");
    },
    async init(id, taskDatatype) {
      this.replyRow = 1;
      formUtil.resetData(this.taskInfo);
      formUtil.resetData(this.dynamic);
      this.subTaskList = [];
      this.taskFileList = [];
      this.dynamicFileList = [];
      this.planTime = 0;
      this.ifOPenSubTask = false;
      this.ifChangeTaskName = false;
      if(taskDatatype === 1) this.taskDatatype = '项目';
      await this.getTaskInfo(id, taskDatatype);
    },
    async getTaskInfo(id, taskDatatype) {
      formUtil.resetData(this.dingUserList);
      this.isLoadingData = true;
      this.taskInfo = await this.$httpN.postB(taskDatatype === 1 ? 'division/task/projectInfo': 'division/task/taskInfo', { id: id });  // 判断是任务还是项目

      let taskBelongData = await this.$httpN.postB(this.taskInfo.taskDatatype === '1'? 'division/plate/info' : this.taskInfo.taskDatatype === '2' ? 'division/task/projectInfo' : 'division/task/taskInfo', {id: this.taskInfo.taskBelongId});
      (taskBelongData.taskStatus === '1' && this.taskInfo.taskDatatype !== '1') || (taskBelongData.plateStatus === '2'  && this.taskInfo.taskDatatype === '1') ? this.canRebootThisTask = true : this.canRebootThisTask = false

      this.taskInfo.taskAttachment ? this.taskInfo.taskAttachment = JSON.parse(this.taskInfo.taskAttachment) : this.taskInfo.taskAttachment = [];
      if (this.taskInfo.taskStartTime !== "") this.planTime = parseInt((new Date(this.taskInfo.taskEndTime) - new Date(this.taskInfo.taskStartTime)) / 1000 / 60 / 60 / 24) + 1;
      this.taskTime = [this.taskInfo.taskStartTime, this.taskInfo.taskEndTime];
      if (this.taskInfo.taskPrincipalId !== "") {
        this.dingUserList.principal.id = this.taskInfo.taskPrincipalId.split(",");
        this.dingUserList.principal.img = this.taskInfo.principalAvatar.split(",");
        this.dingUserList.principal.name = this.taskInfo.taskPrincipalName.split(",");
      }
      if (this.taskInfo.taskConfirmId !== "") {
        this.dingUserList.confirm.id = this.taskInfo.taskConfirmId.split(",");
        this.dingUserList.confirm.img = this.taskInfo.confirmAvatar.split(",");
        this.dingUserList.confirm.name = this.taskInfo.taskConfirmName.split(",");
      }
      if (this.taskInfo.taskCcId !== "") {
        this.dingUserList.cc.id = this.taskInfo.taskCcId.split(",");
        this.dingUserList.cc.img = this.taskInfo.ccAvatar.split(",");
        this.dingUserList.cc.name = this.taskInfo.taskCcName.split(",");
      }
      this.subTaskList = await this.$httpN.postB("division/task/getSubTaskList",{ id: id });
      this.completeTask = 0;
      this.subTaskList.forEach((item) => {
        if(item.taskStatus === '3') this.completeTask++;
      })
      if(this.taskInfo.taskDatatype === '2') {
        let projectInfo = await this.$httpN.postB('division/task/projectInfo', {id: this.taskInfo.taskBelongId})
        if(projectInfo.hasTaskCreateAuthority === '1' && projectInfo.taskStatus === '1' && projectInfo.taskDeleteStatus === '0') this.canCopyThisTask = true
      } else if(this.taskInfo.taskDatatype === '3') {
        this.canCopyThisTask = true
      }
      this.taskInfoInit = JSON.stringify(this.taskInfo);
      this.isLoadingData = false;
      await this.getDynamicList(true)
    },
    editTaskName() {
      if(this.canEditTask) this.ifChangeTaskName = true;
    },
    changePlanTime(e) {
      if (e) {
        let startTime = e[0];
        let endTime = e[1];
        this.planTime = parseInt((endTime - startTime) / 1000 / 60 / 60 / 24) + 1;
        this.taskTime = [startTime, endTime];
        this.taskInfo.taskStartTime = startTime;
        this.taskInfo.taskEndTime = endTime;
      } else {
        this.planTime = 0;
        this.taskInfo.taskStartTime = "";
        this.taskInfo.taskEndTime = "";
      }
    },
    selectDingUsers(showName) {
      if(this.canEditTask) {
        this.complexPicker(1, [], this.dingUserList[showName].id).then(
          async (data) => {
            this.dingUserList[showName].id = data.map(item => item.emplId);
            this.dingUserList[showName].img = data.map(item => item.avatar);
            this.dingUserList[showName].name = data.map(item => item.name);
            if(showName === 'principal') {
              this.taskInfo.principalAvatar = this.dingUserList[showName].img.join(',');
              this.taskInfo.taskPrincipalId = this.dingUserList[showName].id.join(',');
              this.taskInfo.taskPrincipalName = this.dingUserList[showName].name.join(',')
            }else if(showName === 'confirm') {
              this.taskInfo.confirmAvatar = this.dingUserList[showName].img.join(',');
              this.taskInfo.taskConfirmId = this.dingUserList[showName].id.join(',');
              this.taskInfo.taskConfirmName = this.dingUserList[showName].name.join(',')
            }
          }
        );
      }
    },
    delMember(showName, index) {
      this.dingUserList[showName].id.splice(index,1);
      this.dingUserList[showName].img.splice(index,1);
      this.dingUserList[showName].name.splice(index,1);
      if(showName === 'principal') {
        this.taskInfo.principalAvatar = '';
        this.taskInfo.taskPrincipalId = '';
        this.taskInfo.taskPrincipalName = ''
      }else if(showName === 'confirm') {
        this.taskInfo.confirmAvatar = '';
        this.taskInfo.taskConfirmId = '';
        this.taskInfo.taskConfirmName = ''
      }
    },
    //编辑并保存任务
    async projectOrTaskUpdate() {
      if(!this.taskInfo.taskName) return this.$message.error('请输入'+this.taskDatatype+'名称')
      if(this.taskInfo.taskName.length > 30) return this.$message.error(this.taskDatatype+'名称不要超过30个字')
      if(this.taskInfo.taskAttachment.filter(item => !item.url).length > 0) return this.$message.error('附件正在上传，请稍候……');
      if(!this.taskInfo.taskPrincipalId) return this.$message.error('请选择'+this.taskDatatype+'负责人')
      if(!this.taskInfo.taskConfirmId) return this.$message.error('请选择'+this.taskDatatype+'确认人')
      if(!this.taskInfo.taskStartTime) return this.$message.error('请选择'+this.taskDatatype+'开始时间')
      if(!this.taskInfo.taskEndTime) return this.$message.error('请选择'+this.taskDatatype+'结束时间')
      if(!this.taskInfo.taskPrincipalId) return this.$message.error('请选择'+this.taskDatatype+'负责人')
      if(!this.taskInfo.taskPrincipalId) return this.$message.error('请选择'+this.taskDatatype+'负责人')
      if(isNaN(this.taskInfo.taskPerformanceAppraisal)) return this.$message.error(this.taskDatatype+'绩效为数字')
      if(this.taskInfo.taskPerformanceAppraisal < 0) return this.$message.error('任务绩效大于0')

      if(this.taskInfo.id) this.taskInfo.taskCreateTime = '';
      if (! await this.$httpN.postB("division/task/projectOrTaskUpdate",this.taskInfo)) return;
      formUtil.submitSuccess('保存成功');
      await this.init(this.taskInfo.id);
      this.$emit("refresh");
    },
    //设置里程碑
    async setMilestone(taskIsMilestone) {
      if(! await this.$httpN.postB('division/task/setMilestone', {id: this.taskInfo.id,taskIsMilestone: taskIsMilestone})) return
      if (taskIsMilestone === 1) {
        formUtil.submitSuccess('设置里程碑成功');
      } else {
        formUtil.submitSuccess('取消设置里程碑成功');
      }
      this.init(this.taskInfo.id);
    },
    async openMoveDialog() {
      this.moveDialogVisible = true;
      this.moveTo = {
        id: this.taskInfo.taskBelongId,
        taskName: this.taskInfo.taskBelongName
      };
      if (this.taskInfo.taskDatatype === '2') {
        this.moveToList = await this.$httpN.postB("division/task/getVisibleProjectList", {taskStatus: '1'});
      } else {
        let {list} = await this.$httpN.postB('division/task/allTaskList', {
          sectionType: 1,
          searchType: 1,
          limit: 999
        })
        this.moveToList = list.filter(item => {
          return item.taskDatatype === '2' && item.taskStatus === '1' && item.taskDeleteStatus === '0'
        })
      }
    },
    //关注任务
    attentionTask() {
      this.complexPicker(300, [], this.dingUserList['cc'].id).then(
        async (data) => {
          let postData = formUtil.deepCopy(this.taskInfo);
          postData.taskCcId = data.map(item => item.emplId).join(",");
          postData.taskCcName = data.map(item => item.name).join(",");
          if (! await this.$httpN.postB("division/task/projectOrTaskUpdate", postData)) return;
          formUtil.submitSuccess('修改成功');
          await this.init(this.taskInfo.id);
          this.$emit("refresh");
        }
      )
    },
    //移动任务
    async moveProjectOrTask() {
      this.moveTo.taskName = this.$refs['labelSelected'].selectedLabel;
      if(! await this.$httpN.postB('division/task/moveProjectOrTask', {
        id: this.taskInfo.id,
        taskBelongId: this.moveTo.id,
        taskBelongName: this.moveTo.taskName
      })) return 

      formUtil.submitSuccess('任务已移动');
      this.moveDialogVisible = false;
      await this.init(this.taskInfo.id);
      await this.$emit("refresh");
    },
    //删除任务
    async projectOrTaskDelete(id) {
      this.unCompleteTaskList = await this.$httpN.postB('division/task/getUnCompleteTask', {id: this.taskInfo.id});
      if(this.unCompleteTaskList.length > 0) return this.hasUnCompleteTask = true;

      formUtil.submitConfirm('您确定要删除任务吗', async ()=> {
        if(! await this.$httpN.postB("division/task/projectOrTaskDelete", { id: id })) return 
        formUtil.submitSuccess('删除成功');
        this.$emit("refresh");
        this.$emit("closeSelf");
      })
    },
    async openStopDialog() {
      this.unCompleteTaskList = await this.$httpN.postB('division/task/getUnCompleteTask', {id: this.taskInfo.id});
      if(this.unCompleteTaskList.length > 0) return this.hasUnCompleteTask = true;

      formUtil.submitConfirm('您确定要终止任务吗', async ()=> {
        if (!await this.$httpN.postB("division/task/updateTaskStatus", { id: this.taskInfo.id, taskStatus: 9, taskExplanation: ''}) ) return;
        formUtil.submitSuccess('终止成功');
        this.$emit("refresh");
        this.$emit("closeSelf");
      })
    },
    async rebootTask() {
      if (!await this.$httpN.postB("division/task/rebootTask", { id: this.taskInfo.id}) ) return;
      formUtil.submitSuccess('重启成功');
      this.$emit("refresh");
      this.$emit("closeSelf");
    },
    async openUpdateTaskStatusDialog(taskStatus) {
      if ( taskStatus === 2 && this.taskInfo.taskDatatype !== '3' ) {
        this.unCompleteTaskList = await this.$httpN.postB('division/task/getUnCompleteTask', {id: this.taskInfo.id});
        if(this.unCompleteTaskList.length > 0) return this.hasUnCompleteTask = true;
      }
      this.taskExplanation = '';
      this.updateStatusDialog = true;
    },
    //改变任务状态
    async updateTaskStatus() {
      if(!this.taskExplanation && this.taskInfo.taskStatus === '1') return this.$message.error('请输入完成'+this.taskDatatype+'说明')
      if (!await this.$httpN.postB("division/task/updateTaskStatus", { id: this.taskInfo.id, taskStatus: this.taskInfo.taskStatus === '1' ? '2' : '3', taskExplanation: this.taskExplanation}) ) return;
      formUtil.submitSuccess(this.taskInfo.taskStatus === '1' ? this.taskDatatype+'已标记完成': this.taskDatatype+'已确认完成');
      this.updateStatusDialog = false;
      this.$emit("refresh");
      this.$emit("closeSelf");
    },
    //打开关闭子任务
    async openSubTask() {
      this.ifOPenSubTask = !this.ifOPenSubTask;
    },
    addSubTaskHandle() {
      let data = {id: this.taskInfo.id, taskName: this.taskInfo.taskName, projectName: this.taskInfo.taskBelongName, taskDatatype: 3};
      this.$nextTick(() => {
        this.$refs.AddOrUpdateTask.init(data);
      })
    },
    async refreshTaskDetail() {
      await this.init(this.taskInfo.id);
      this.$emit("refresh");
    },
    //获取动态列表
    async getDynamicList(init) {
      if(init) {
        this.page = 1;
        this.dateCollect = [];
        this.trendDataCollect = {};
        this.isFirstLoading = true;
      }
      if (this.taskInfo.taskDatatype === '1') {
        var {list, totalPage} = await this.$httpN.postB("division/dynamic/list", {
          dynamicAscription: this.taskInfo.taskDatatype,
          projectIds: this.taskInfo.id,
          page: this.page,
          limit: 5
        });
      } else {
        var {list, totalPage} = await this.$httpN.postB("division/dynamic/list", {
          dynamicAscription: this.taskInfo.taskDatatype,
          dynamicTaskId: this.taskInfo.id,
          page: this.page,
          limit: 5
        });
      }
      this.loading = false;
      this.setDataToCollect(list);
      if(init) {
        this.totalPage = totalPage;
        this.$nextTick(() => {
          this.isFirstLoading = false;
        })
      }
    },
    setDataToCollect(list) {
      list.forEach(item => {
        if(item.dynamicAttachment) {
          item.dynamicAttachment = JSON.parse(item.dynamicAttachment);
        }else{
          item.dynamicAttachment = []
        }
        if(!this.dateCollect.includes(item.dayGroup)) {
          this.dateCollect.push(item.dayGroup);
          this.$set(this.trendDataCollect, item.dayGroup, [])
        }
        this.trendDataCollect[item.dayGroup].push(item);
      })
    },
    async uploadFile(e, target) {
      var files = e.target.files;
      var $this = this;
      Object.keys(files).forEach(function(key){
        var file = files[key];
        if(file.size / 1024 / 1024 > 20) return $this.$message.error('上传单个文件大小不能超过20MB!请压缩文件')
        var formData = new FormData();
        formData.append("file", file);
        formData.append("name", 'file');
        let newfile = {
          name: file.name,
          url: '',
          size: file.size,
          uploader: $this.userInfo.realName,
          time: dateUtil.thisDay()
        }
        target.push(newfile)
        $this.$httpN.upload('fileUpload', formData).then(res => {
          if(res.data.code === 0) {
            newfile.url = res.data.url;;
          }else if(res.data.code === 500) {
            $this.$message.error(res.data.msg)
            target.pop();
          }
        })
      })
      e.target.value = ''
    },
    delFile(idx,target){
      target.splice(idx, 1)
    },
    downloadFile: function (url, fileName) {//跨域文件路径、下载到本地的文件名
      if(/\.(bmp|gif|jpg|pic|png|tif|jpeg)$/.test(url)) return this.dingPreviewPic(url);
      if(!url) return;
      var x = new XMLHttpRequest();
      x.open("GET", url, true);
      x.responseType = 'blob';
      x.onload=function(e) {
        var url = window.URL.createObjectURL(x.response)
        var a = document.createElement('a');
        a.href = url
        a.download = fileName;
        a.click()
      }
      x.send();
    },
    async submitDynamic() {
      if (this.dynamic.dynamicContent === '' && this.dynamic.dynamicAttachment.length === 0) return this.$message.error("请输入评论内容或添加附件后提交");
      if(this.dynamic.dynamicAttachment.filter(item => !item.url).length > 0) return this.$message.error('附件正在上传，请稍候……');
      if(! await this.$httpN.postB('division/dynamic/reviewSave', {
        dynamicTaskId: this.taskInfo.id,
        dynamicTaskName: this.taskInfo.taskName,
        dynamicExecutiveId: this.userInfo.dingId,
        dynamicExecutiveName: this.userInfo.realName,
        dynamicContent: this.dynamic.dynamicContent,
        dynamicAscription: this.taskInfo.taskDatatype,
        dynamicAttachment: this.dynamic.dynamicAttachment
      })) return 
      formUtil.submitSuccess('评论成功');
      this.getDynamicList(true);
      formUtil.resetData(this.dynamic);
      this.replyRow = 1;
      this.$emit("refresh");
    },
    loadTrends() {
      this.loading = true;
      this.page ++;
      this.getDynamicList();
    },
    getPic(filename) {
      if(filename) {
        if(/\.(bmp|gif|jpg|pic|png|tif|jpeg)$/.test(filename)){
          return 'https://livolo-office.oss-cn-hangzhou.aliyuncs.com/1276438103037435905.png'
        }else if(/\.(txt)$/.test(filename)){
          return 'https://livolo-office.oss-cn-hangzhou.aliyuncs.com/1276438530785140737.png'
        }else if(/\.(xls|xlsx)$/.test(filename)){
          return 'https://livolo-office.oss-cn-hangzhou.aliyuncs.com/1276438725690253314.png'
        }else if(/\.(doc|docx)$/.test(filename)){
          return 'https://livolo-office.oss-cn-hangzhou.aliyuncs.com/1276439195636850689.png'
        }else if(/\.(psd)$/.test(filename)){
          return 'https://livolo-office.oss-cn-hangzhou.aliyuncs.com/1276439984203751426.png'
        }else if(/\.(pdf)$/.test(filename)){
          return 'https://livolo-office.oss-cn-hangzhou.aliyuncs.com/1276440139145535490.png'
        }else if(/\.(ppt|pptx|dps|dpt)$/.test(filename)){
          return 'https://livolo-office.oss-cn-hangzhou.aliyuncs.com/1276440657859305473.png'
        }else if(/\.(rar|zip|arj|gz)$/.test(filename)){
          return 'https://livolo-office.oss-cn-hangzhou.aliyuncs.com/1276442063039193090.png'
        }else if(/\.(html|htm)$/.test(filename)){
          return 'https://livolo-office.oss-cn-hangzhou.aliyuncs.com/1276442135319633921.png'
        }else if(/\.(dwg|bak|dwt)$/.test(filename)){
          return 'https://livolo-office.oss-cn-hangzhou.aliyuncs.com/1276441741667459074.png'
        }else if(/\.(wav|aif|au|mp3|ram|wma|mmf)$/.test(filename)){
          return 'https://livolo-office.oss-cn-hangzhou.aliyuncs.com/1276442006684524546.png'
        }else if(/\.(avi|mov|rmvb|rm|flv|mp4)$/.test(filename)){
          return 'https://livolo-office.oss-cn-hangzhou.aliyuncs.com/1276442233483124737.png'
        }else{
          return 'https://livolo-office.oss-cn-hangzhou.aliyuncs.com/1276436590181343234.png'
        }
      }else {
        return 'https://livolo-office.oss-cn-hangzhou.aliyuncs.com/1276436590181343234.png'
      }
    },
    openProjectDetail() {
      this.$nextTick(() => {
         this.$refs.ProjectDetail.init(this.taskInfo.id);
      })
    },
    submitCompleteSubTask() {
      formUtil.submitConfirm(this.taskInfo.taskDatatype === '1' ? '是否标记完成所有任务及子任务' : '是否标记完成所有子任务', async ()=> {
        if(!await this.$httpN.postB('division/task/completeSubTask',{id: this.taskInfo.id})) return;
        formUtil.submitSuccess('其下所有任务已标记完成');
        this.hasUnCompleteTask = false;
        this.$emit("refresh");
        this.$emit("closeSelf");
      })
    }
  },
  computed: {
    disabled () {
      return this.isFirstLoading || this.loading || this.noMore
    },
    noMore () {
      return this.page >= this.totalPage;
    },
    canEditTask() {
      return (this.taskInfo.taskStatus === '1' || this.taskInfo.taskStatus === '2') && this.taskInfo.taskDeleteStatus ==='0' && (this.taskInfo.hasTaskModifyAuthority === '1' || this.taskInfo.hasProjectAuthority === '1')
    },
    canAddTask() {
      return this.taskInfo.taskStatus === '1' && this.taskInfo.taskDeleteStatus ==='0' && (this.taskInfo.hasTaskModifyAuthority === '1' || this.taskInfo.hasProjectAuthority === '1')
    },
    cantSetMilestone() {
      return this.taskInfo.taskManageId === this.userInfo.dingId || this.taskInfo.taskPrincipalId === this.userInfo.dingId
    },
    canDelTask() {
      return this.taskInfo.hasTaskDeleteAuthority === '1'
    },
    showUpdateBtn() {
      return (this.taskInfoInit !== JSON.stringify(this.taskInfo)) && this.isLoadingData === false;
    },
    canRebootTask() {
      return this.taskInfo.taskStatus === '3' && (this.taskInfo.hasTaskModifyAuthority === '1' || this.taskInfo.hasProjectAuthority === '1') && this.canRebootThisTask
    }
  }
};
</script>

<style lang='scss' scoped>
.task-info-module::-webkit-scrollbar {
  width: 0px;
  height: 0px;
}
.task-info-module {
  width: 700px;
  height: 100%;
  font-size: 14px;
  background-color: #fff;
  position: absolute;
  top: 0;
  right: 0;
  z-index: 3;
  overflow-y: auto;
  .task-info-tool-bar {
    background-color: #ffffff;
    position: fixed;
    width: 700px;
    height: 54px;
    z-index: 99;
    .tool-bar-content {
      display: flex;
      flex-wrap: wrap;
      justify-content:space-between;
      align-content: flex-start;
      width: 100%;
      height: 100%;
      padding: 10px 20px;
      line-height: 33px;
      border-bottom: 1px solid #dcdfe6;
      h1 {
        width: 240px;
        display: inline-block;
        margin: 0;
        font-size: 18px;
        font-weight: 400;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .nav {
        .nav-items {
          text-align: center;
          float: left;
          padding: 0 10px;
          i {
            font-size: 20px;
            cursor: pointer;
          }
          .el-icon-menu:hover {
            color: #4983ff;
          }
          .active{
            color: red;
          }
        }
      }
    }
  }
  .task-info-top {
    padding: 10px 40px;
    margin: 74px 0 20px 0;
    line-height: 40px;
    .el-row {
      margin-bottom: 20px;
      &:last-child {
        margin-bottom: 0;
      }
    }
    .update-status-btn {
      right: 0;
      top: 6px;
    }
    .status-text {
      color: rgb(144, 147, 153);
      text-transform: uppercase;
      text-shadow: rgb(196, 181, 157) 0px 8px 9px, rgb(255, 255, 255) 0px -2px 1px;
      font-size: 20px;
      padding: 10px;
      border-radius: 50%;
    }
    .title {
      font-size: 18px;
      flex: 1;
    }
    img {
      width: 30px;
      height: 30px;
      border-radius: 50%;
      border: 1px solid #dcdfe6;
    }
    .if-read {
      float: right;
    }
    .select-btn{
      float:left;
      font-weight: normal;
      width: 80px;
      height: 28px;
      border-radius: 30px;
      background: #FAFAFA;
      border: 1px solid #ECECEC;
      position: relative;
      padding-left: 21px;
      line-height: 28px;
      color: #7982A7;
      font-size: 12px;
      text-align: center;
      cursor: pointer;
      span{
        position: absolute;
        top: 1px;
        left: 1px;
        display:block;
        height: 24px;
        width: 24px;
        background: #CACACA;
        color: white;
        border-radius: 50%;
        text-align: center;
        line-height: 24px;
        img{
          width: 24px;
          height: 24px;
          border-radius: 50%;
        }
      }
      .close{
        position: absolute;
        font-size: 20px;
        top: -10px;
        right: -10px;
        color: #66b1ff;
        display: none;
      }
      .del{
        position: absolute;
        top:0;
        left: 0;
        width: 100%;
        height: 100%;
        border-radius: 30px;
        color: white;
        text-align: center;
        background:rgba(130, 130, 130, 0.9);
        display: none;
      }
      &:hover{
        .del, .close{
          display: block;
        }
      }
    }
  }
  .task-info-sub-title {
    cursor: pointer;
    text-align: center;
    color: #4983ff;
  }
  .task-content{
    z-index: 2;
    height: 100%;
    overflow-y: auto;
    margin-bottom: 100px;
    .ccAvatar {
      padding: 10px 0 10px 30px;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      span{
        display:inline-block;
        width:24px;
        height: 24px;
        border-radius: 50%;
        border: 1px dashed #DEDEDE;
        line-height: 24px;
        text-align: center;
        color: #BDBDBD;
        cursor: pointer;
        margin-left:10px;
        position: relative;
        top:3px;
        i{
          font-weight: bold;
          font-size: 16px;
        }
      }
    }
    .date{
      font-size: 18px;
      margin: 20px 0;
    }
    .project-wrapper{
      padding: 10px 40px 30px;
      background: white;
      border-radius: 3px;
      .project-header{
        width: 100px;
        line-height: 32px;
        border-radius: 100px;
        background: #ECECEC;
        color: #75797E;
        text-align: center;
        margin-left: 25px;
        position: relative;
      }
      .project-trend-wrapper{
        .project-trend{
          display: flex;
          .avatar{
            margin-left: 20px;
            margin-right: 15px;
            position: relative;
            img{
              width: 40px;
              height: 40px;
              border-radius: 50%;
              position: absolute;
              z-index: 2;
            }
            &::after{
              content: '';
              height: 100%;
              position: absolute;
              top:0;
              left: 19.5px;
              z-index: 1;
              border-width: 1px;
              border-style: dashed;
              border-color: #ECECEC;
              border-right-width: 0px;
            }
          }
          &:last-child{
            .avatar::after{
              content: none;
            }
          }
          &:first-child{
            .avatar::before{
              content: '';
              height: 30px;
              position: absolute;
              top:-30px;
              left: 19.5px;
              z-index: 1;
              border-width: 1px;
              border-style: dashed;
              border-color: #ECECEC;
              border-right-width: 0px;
            }
          }
          .time{
            margin-top: 10px;
            color: #B8BFCB;
          }
          .trend-detail{
            margin-left: 40px;
            padding-top: 5px;
            padding-bottom: 40px;
            p{
              margin: 0;
            }
            .row-1{
              span{
                margin-left: 15px;
                color:#606266;
              }
            }
            .row-2{
              padding: 10px 0;
              font-size: 13px;
              display: inline-block;
              color: #909399;
              white-space: pre-line;
            }
            .row-3{
              color: #909399;
            }
          }
        }
        .project-trend:first-child{
          margin-top: 30px;
        }
      }
    }
  }
  .box-card{
    padding: 10px 0;
    background: #F5F5F5;
    .row-1{
      height: 50px;
      line-height: 50px;
      background: white;
      .task-info-sub-title{
        font-weight: bold;
        margin-left: 40px;
        color: #409EFF;
      }
    }
    .row-2{
      background: white;
      padding-bottom: 10px;
      .child-wrapper{
        width: 92%;
        margin: 0 auto;
        padding: 20px 15px;
        border: 1px solid #F0F2F3;
        >p{
          margin: 0;
          font-weight: bold;
          margin-bottom: 10px;
        }
      }
      .child-task{
        line-height: 32px;
        background: #F5F5F5;
        display:flex;
        width: 100%;
        cursor: pointer;
        font-size: 12px;
        margin-bottom: 5px;
        position: relative;
        &::before{
          content: '';
          width:0;
          height:0;
          position: absolute;
          top: 0;
          left: 0;
          border-top:solid 8px #B4C6CC;
          border-left:solid 8px #B4C6CC ;
          border-bottom:solid 8px transparent;
          border-right:solid 8px transparent;
        }
        >div:first-child{
          flex: 1;
          padding-left: 20px;
        }
        >div:nth-child(2){
          width: 150px;
        }
        >div:last-child{
          width: 80px;
        }
      }
    }
  }
}
.addfilebtn{
  line-height: 22px;
  cursor: pointer;
  color: #909399;
  display: block;
  margin-bottom:5px;
}
.fileitem{
  line-height: 32px;
  margin-bottom: 5px;
  background: #F5F5F5;
  width: 474px;
  padding-left:15px;
  font-size: 12px;
  .uploadtip{
    float:right;
    margin-right: 20px;
    cursor: pointer;
  }
}
 .arrow-status{
  width:0;
  height:0;
  position: absolute;
  top: -30px;
  left: -30px;
  border-top:solid 30px #4495FF;
  border-left:solid 30px #4495FF ;
  border-bottom:solid 30px transparent;
  border-right:solid 30px transparent;
  &.arrow-1{
    border-top:solid 30px #21D779;
    border-left:solid 30px #21D779 ;
  }
  &.arrow-2{
    border-top:solid 30px #9987FA;
    border-left:solid 30px #9987FA ;
  }
  &.arrow-3{
    border-top:solid 30px #DBDADA;
    border-left:solid 30px #DBDADA ;
  }
  &.arrow-4{
    border-top:solid 30px #4495FF;
    border-left:solid 30px #4495FF ;
  }
  &.arrow-5{
    border-top:solid 30px #B0C7CD;
    border-left:solid 30px #B0C7CD ;
  }
  &.arrow-6{
    border-top:solid 30px #E6A23C;
    border-left:solid 30px #E6A23C ;
  }
}

.task-status{
  position: absolute;
  width: 60px;
  line-height: 20px;
  left: -36px;
  top: -19px;
  color: white;
  font-size: 12px;
  transform: rotate(-45deg);
  text-align: center;
  font-weight: normal;
}
.arrow-status-white{
  width:0;
  height:0;
  position: absolute;
  top: -30px;
  left: -30px;
  border-top:solid 15px white;
  border-left:solid 15px white ;
  border-bottom:solid 15px transparent;
  border-right:solid 15px transparent;
}
.dynamic-bottom{
  position: fixed;
  bottom: 0;
  border-top: 1px solid #DEDEDE;
  width: 700px;
  background-color: #fff;
  padding: 10px;
  z-index: 4;
  .dynamic-handle{
    margin-top: 10px;
    display: flex;
    flex-wrap: wrap;
    justify-content:space-between;
    align-content: flex-start;
  }
}
.copy-task::-webkit-scrollbar {/*滚动条整体样式*/
  width: 4px;     /*高宽分别对应横竖滚动条的尺寸*/
  height: 4px;
}
.copy-task::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
  border-radius: 5px;
  -webkit-box-shadow: inset 0 0 5px #DEDEDE;
  background: rgba(0,0,0,0.2);
  scrollbar-arrow-color:red;
}
.copy-task {
  margin-top: 20px;
  height: 300px;
  overflow-y: auto;
  .task-rows {
    height: 50px;
    line-height: 50px;
    border-top: 1px solid #eee;
    display: flex;
    position: relative;
    &:last-child {
      border-bottom: 1px solid #eee;
    }
    .task-name {
      flex: 1;
      margin: 0 30px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      cursor: pointer;
    }
    .user {
      width: 80px;
      img {
        width: 24px;
        height:24px;
        border-radius:50%;
        margin-right: 5px;
      }
    }
    .arrow-status {
      width: 0;
      height: 0;
      position: absolute;
      top: 0;
      left: 0;
      border-top: solid 10px #21D779;
      border-left: solid 10px #21D779;
      border-bottom: solid 10px transparent;
      border-right: solid 10px transparent;
    }
  }
  .active {
    border: 2px solid #409EFF;
    background-color: rgba(64, 158, 255, 0.1);
  }
}
</style>